<template>
  <div class="basic-table-layout">
    <div v-if="$slots.filter" class="basic-table-layout__filter">
      <div class="left">
        <slot name="filter"></slot>
      </div>
      <div class="right">
        <slot name="filter-right"></slot>
      </div>
    </div>

    <div class="basic-table-layout__wrapper">
      <slot></slot>
    </div>

    <div v-if="$slots.footer" class="basic-table-layout__footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface IProps {
  showFooterBorderLine?: boolean
}
const props = withDefaults(defineProps<IProps>(), {
  showFooterBorderLine: true
})
const borderLine = computed(() =>
  !props.showFooterBorderLine ? 'none' : '1px solid #f1f2f3'
)
</script>

<style scoped lang="scss">
.basic-table-layout {
  @apply flex max-h-full flex-col items-start w-full relative overflow-y-auto;

  &__filter {
    @apply w-full flex items-center mb-[16px];

    .left {
      @apply flex gap-x-[16px] flex-1;
    }

    .right {
      @apply flex-shrink-0 ml-4;
    }
  }

  &__wrapper {
    @apply flex-1 w-full overflow-auto flex-shrink-0;
  }

  &__footer {
    @apply flex-shrink-0 w-full self-end pt-4;

    border-top: v-bind(borderLine);
  }
}
</style>
